<template>
  <view class="styleMessageBoard">
    <!-- <toast></toast> -->
    <!-- <u-navbar title="财务中心" :bgColor="navbarClass.titleBgColor" @leftClick="backHome" :placeholder="true"> </u-navbar> -->
    <image class="image1" src="../../static/image/messageBoard1.png" mode="" />
    <view class="tabList">
      <view class="tabItem" v-for="(item, index) in LeavingList" :key="index">
        <view class="userMsg">
          <text class="txt1">{{ item.memberName }}</text>
          <text class="txt2">{{ dateFormat(item.createTime, 'yyyy-MM-dd') }}</text>
        </view>
        <view class="txt3">{{ item.taskName }}</view>
        <view class="reply">
          <view class="txt4"><text class="text5">回复：</text>{{ item.adminRemark }}</view>
          <view class="txt6">{{ item.shenheTime }}</view>
        </view>
      </view>
    </view>

    <view class="subMessage">
      <image class="image2" @click="messageShow = true" src="../../static/image/messageBoard2.png" mode="" />
    </view>

    <view class="loading" v-if="loadingShow && page == 1"><u-loading-icon></u-loading-icon></view>

    <u-popup :show="messageShow" :round="8" mode="center" @close="close" @open="open">
      <view class="msgCont">
        <view class="title">添加留言</view>
        <view class="lable">
          <view class="labText">昵称</view>
          <u--input placeholder="请输入昵称" border="surround" v-model.trim="nickName"></u--input>
        </view>
        <view class="lable">
          <view class="labText">留言内容</view>
          <u--textarea placeholder="请输入留言" v-model.trim="messageContent"></u--textarea>
        </view>

        <view class="tips">注：提交成功后管理员审核通过才会展示留言墙上哦~</view>
        <view class="btns">
          <u-button style="margin-right: 24rpx" type="info" color="#999" :plain="true" text="取消" @click="closeMsg"></u-button>
          <u-button style="margin-left: 24rpx" type="primary" text="提交" @click="submitPicture"></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      LeavingList: [],
      loadingShow: true,
      messageShow: false,
      nickName: '',
      messageContent: '',
      loadStatus: true,
      page: 1,
    }
  },
  onLoad() {
    this.getFindLeavingList()
  },
  methods: {
    // 提交留言信息
    submitPicture() {
      if (this.nickName == '') {
        this.$u.toast('昵称不能为空')
        return
      }
      if (this.messageContent == '') {
        this.$u.toast('留言内容不能为空')
        return
      }
      this.$https
        .post({
          url: '/axh/insert/insertMessageContent',
          data: {
            nickName: this.nickName,
            messageContent: this.messageContent,
            phoneAuth: 1,
          },
        })
        .then((res) => {
          this.messageShow = false
          uni.showModal({
            title: '提示',
            content: '提交成功，等待审核！',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
              }
            },
          })
        })
    },
    // 留言列表
    getFindLeavingList() {
      this.loadingShow = true
      this.$https
        .post({
          url: '/axh/find/feedBackList',
          data: {
            page: this.page,
            limit: 10,
            status: 1,
            phoneAuth: 1,
          },
        })
        .then((res) => {
          this.page++
          this.loadingShow = false
          this.LeavingList = [...this.LeavingList, ...res.list]
          if (this.LeavingList && this.LeavingList.length >= res.total) {
            this.loadStatus = false
          }
        })
    },
    closeMsg() {
      this.messageShow = false
      this.nickName = ''
      this.messageContent = ''
    },
    gotoJump(url) {
      uni.navigateTo({
        url: url,
      })
    },

    onReachBottom() {
      if (this.loadStatus == false) {
        this.$u.toast('没有更多内容啦')
      } else {
        this.getFindLeavingList()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.styleMessageBoard {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 60rpx;
  .image1 {
    width: 100%;
    height: 343rpx;
    margin-bottom: 22rpx;
  }
  .tabList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 32rpx;

    .tabItem {
      width: 100%;
      background: #fff;
      margin-top: 24rpx;
      border-radius: 8rpx;
      padding: 24rpx;
      line-height: 34rpx;

      .userMsg {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color: #4999f9;
        margin-bottom: 12rpx;
        .txt1 {
          font-weight: 600;
          font-size: 28rpx;
        }
        .txt2 {
          font-size: 26rpx;
        }
      }
      .txt3 {
        font-family: PingFang SC-中等, PingFang SC;
        color: #333333;
        font-size: 26rpx;
        margin-bottom: 12rpx;
      }
      .reply {
        background: #f9f9f9;
        border-radius: 8rpx;
        padding: 8rpx 16rpx;
        font-size: 26rpx;
        color: #9e9e9e;
        .txt4 {
          margin-bottom: 12rpx;

          .text5 {
            color: #333333;
          }
        }
      }
    }
  }

  .subMessage {
    position: fixed;
    bottom: 100rpx;
    right: 40rpx;
    .image2 {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .msgCont {
    width: 652rpx;
    background: #ffffff;
    border-radius: 8rpx;
    padding: 24rpx 32rpx 42rpx;
    .title {
      text-align: center;
      font-size: 32rpx;
      color: #35353f;
      font-weight: 600;
      margin-bottom: 16rpx;
    }
    .lable {
      margin-bottom: 16rpx;
      .labText {
        font-size: 28rpx;
        margin-bottom: 10rpx;
      }
    }
    .tips {
      font-size: 24rpx;
    }
    .btns {
      display: flex;
      margin-top: 24rpx;
    }
  }
}
</style>
